<template>
  <div class="upload-template">
    <a-modal
      v-model:open="props.open"
      :title="title"
      width="1200px"
      :footer="null"
      @cancel="onClose"
    >
      <a-table
        :columns="column"
        :data-source="dataSource"
        :pagination="pagination"
      >
        <template #bodyCell="{ column, record, text }">
          <template v-if="column.dataIndex === 'active'">
            <a-button type="link" @click="onDown(record)">下载</a-button>
          </template>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, computed } from 'vue';
import { message } from 'ant-design-vue';
import {
  importCustomerHistory,
  exportCustomerHistory,
} from '#/api/core/customerInformation';
const props = defineProps({
  open: {
    type: Boolean,
    default: false,
  },
  selectedType: {
    type: String,
    default: '热源', // 默认值可以根据需要设置
  },
  histToryType: {
    type: String,
    default: '导出', // 默认值可以根据需要设置
  },
});
watch(
  () => props.selectedType,
  () => {
    if (props.open) {
      onSearch();
    }
  },
);
const title = computed(() => {
  if (props.histToryType == '导出') {
    return '导出历史';
  }
  return '导入历史';
});
const column = computed(() => {
  if (props.histToryType == '导出') {
    return columns;
  }
  return columns_two;
});
watch(
  () => props.open,
  (newVal) => {
    if (newVal) {
      onSearch();
    }
  },
);
const emit = defineEmits(['onClose', 'refresh']);
const onClose = () => {
  emit('onClose');
};
const columns = [
  {
    title: '文件名',
    dataIndex: 'fileName',
    key: 'fileName',
    align: 'center',
  },
  {
    title: '归属机构',
    dataIndex: 'companyName',
    key: 'companyName',
    align: 'center',
  },
  {
    title: '申请时间',
    dataIndex: 'operationDate',
    key: 'operationDate',
    align: 'center',
  },
  {
    title: '申请人',
    dataIndex: 'operatorName',
    key: 'operatorName',
    align: 'center',
  },
  {
    title: '导入状态',
    dataIndex: 'exportStatus',
    key: 'exportStatus',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'active',
    key: 'active',
    align: 'center',
  },
];
const columns_two = [
  {
    title: '文件名',
    dataIndex: 'fileName',
    key: 'fileName',
    align: 'center',
  },
  {
    title: '申请人',
    dataIndex: 'applicantName',
    key: 'applicantName',
    align: 'center',
  },
  {
    title: '申请时间',
    dataIndex: 'applicationTime',
    key: 'applicationTime',
    align: 'center',
  },
  {
    title: '审批人',
    dataIndex: 'approverName',
    key: 'approverName',
    align: 'center',
  },
  {
    title: '审批时间',
    dataIndex: 'approvalTime',
    key: 'approvalTime',
    align: 'center',
  },
  {
    title: '审批结果',
    dataIndex: 'approvalStatus',
    key: 'approvalStatus',
    align: 'center',
  },
  {
    title: '导入状态',
    dataIndex: 'importStatus',
    key: 'importStatus',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'active',
    key: 'active',
    align: 'center',
  },
];
const dataSource = ref([]);
const pagination = reactive({
  total: 0,
  pageSize: 10,
  current: 1,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    onSearch();
  },
});
const getType = (type: any) => {
  if (type == '热用户') {
    return '房间';
  } else if (type == '小区') {
    return '小区';
  } else if (type == '热站') {
    return '换热站';
  } else {
    return type;
  }
};
const onSearch = () => {
  if (props.histToryType == '导出') {
    const query = {
      page: pagination.current,
      limit: pagination.pageSize,
      exportType: getType(props.selectedType),
    };
    exportCustomerHistory(query).then((res: any) => {
      if (res && res.data) {
        dataSource.value = res.data.data || [];
        pagination.total = res.data.count || 0;
      }
    });
  } else if (props.histToryType == '导入') {
    const query = {
      page: pagination.current,
      limit: pagination.pageSize,
      importType: getType(props.selectedType),
    };
    importCustomerHistory(query).then((res: any) => {
      console.log(res);
      if (res && res.data) {
        dataSource.value = res.data.data || [];
        pagination.total = res.data.count || 0;
      }
    });
  }
};
const onDown = (e: any) => {
  // console.log(e);
  const loading = message.loading({
    content: "下载中...",
    duration: 0,
  });

  try {
    // 下载地址拼接
    const url = e.urlAddress;

    // 使用a标签下载，避免X-Frame-Options错误
    const link = document.createElement("a");
    link.href = url;
    link.download = ""; // 触发下载而不是导航
    link.target = "_blank";
    link.style.display = "none";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

    // 关闭loading
    setTimeout(() => {
      loading();
    }, 1000);
  } catch (error) {
    console.error("下载出错:", error);
    message.error("下载出错，请重试");
    loading();
  }
};
</script>
<style scoped></style>
